<!--
 * @Author: boyyang
 * @Date: 2022-01-30 15:44:35
 * @LastEditTime: 2022-02-01 22:09:37
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\components\blog\editBlog.vue
-->

<template>
    <div class="edit-blog-wrapper" v-show="isShow">
        <div class="img-preview" v-show="tempUrl && tempUrl != ''">
            <img :src="tempUrl" />
        </div>
        <div class="top-wrapper">
            <div class="img-preview img-preview-title" v-show="tempUrl && tempUrl != ''">
                <img :src="tempUrl" />
            </div>
            <div class="title">
                <span>标题:</span>
                <input maxlength="70" v-model="title" />
            </div>
            <div class="desc">
                <span>描述:</span>
                <textarea maxlength="250" v-model="desc"></textarea>
            </div>
            <div class="submit-btn">
                <i class="iconfont icon-dongtai" @click="submit"></i>
            </div>
            <div class="submit-img-btn">
                <custom-upload :file-size="6" file-type="image/*" @onChange="imgChange">
                    <i class="iconfont icon-tupian1"></i>
                </custom-upload>
            </div>
        </div>
        <div class="md-box">
            <v-md-editor v-model="text" height="100%"></v-md-editor>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useMessage } from '@/components/message'
import { useLoading } from '@/components/fullScreenLoading'
import { upload } from '@/cloudbase'

interface IEditBlogProps {
    isShow?: boolean;
    blogTitle?: string;
    blogDesc?: string;
    blogText?: string;
    blogBg?: string;
    isEdit?: boolean;

}

interface IEditBlogMes {
    title: string;
    desc: string;
    text: string;
    blogBg?: string;
}

interface IEditBlogEmits {
    (e: 'submit', text: IEditBlogMes): void
}

const message = useMessage()
const loading = useLoading()

const props = withDefaults(defineProps<IEditBlogProps>(), {
    isShow: false,
    isEdit: false
})

watch(
    [
        () => props.blogTitle,
        () => props.blogDesc,
        () => props.blogText,
        () => props.blogBg
    ],
    (
        [n_title, n_desc, n_text, n_blogbg],
        [o_title, o_desc, o_text, o_blogbg]
    ) => {
        if (props.isEdit) {
            title.value = n_title as string
            desc.value = n_desc as string
            text.value = n_text as string
            tempUrl.value = n_blogbg as string
        }

    })

const text = ref<string>('')
const title = ref<string>('')
const desc = ref<string>('')
const tempUrl = ref<string>('')

const emits = defineEmits<IEditBlogEmits>()

const submit = () => {
    let mes: IEditBlogMes = {
        title: title.value,
        desc: desc.value,
        text: text.value,
        blogBg: tempUrl.value
    }

    if (mes.title.trim() == '' || mes.desc.trim() == '' || mes.text.trim() == '') {
        message.error('标题,描述,博客内容为必填项')
        return
    }

    emits('submit', mes)
}

const imgChange = (e: any) => {
    loading.start()
    tempUrl.value = e.tempUrl
    upload(e.file, 'userBlogBg', 'userBlogBg').then((res) => {
        tempUrl.value = res.tempFileURL
        loading.end()
    })
}
</script>

<style scoped lang="scss">
.edit-blog-wrapper {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    background-color: rgb(74, 179, 173);

    z-index: 99;

    .top-wrapper {
        box-sizing: border-box;
        width: 70%;
        background-color: #fff;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        position: relative;

        .title {
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-size: 15px;

            margin-bottom: 5px;
            z-index: 9;

            span {
                white-space: nowrap;
                z-index: 9;
            }
        }

        .desc {
            display: flex;
            justify-content: center;
            align-items: center;

            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            font-size: 15px;

            z-index: 9;

            span {
                white-space: nowrap;
                z-index: 9;
            }
        }

        input,
        textarea {
            box-sizing: border-box;
            outline: none;
            border: none;
            padding-left: 10px;

            margin-left: 5px;

            width: 400px;
            height: 30px;

            background-color: rgba(161, 43, 78, 0.5);
            border-radius: 3px;

            font-size: 13px;
            color: whitesmoke;

            z-index: 9;
        }

        textarea {
            box-sizing: border-box;
            width: 400px;
            height: 100px;
            resize: none;
            padding: 10px;
        }
    }

    .md-box {
        width: 70%;
        height: 60%;

        position: relative;
    }

    .submit-btn {
        position: absolute;
        right: 20px;
        top: 10px;

        i {
            font-size: 25px;
            font-weight: 500;
            cursor: pointer;

            &:hover {
                color: rgb(180, 97, 111);
            }
        }
    }

    .submit-img-btn {
        position: absolute;
        bottom: 10px;
        right: 20px;

        i {
            font-size: 25px;
            cursor: pointer;

            &:hover {
                color: rgb(180, 97, 111);
            }
        }
    }

    .img-preview {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;

        // opacity: 0.8;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .img-preview-title {
        opacity: 0.3;
    }
}

@media screen and (max-width: 1000px) {
    .edit-blog-wrapper {
        .top-wrapper {
            width: 100%;
        }

        .md-box {
            width: 100%;
        }
    }
}
</style>
